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What does this document do? 


This document provides an insight into the usability issues that are important to enhance the 
experience of all visitors to your website. This document provides examples and statistics that 
will help you on your way to providing a good service for your visitors and encourage them to 
return again and again. Designers need to be aware that interfaces must be created with the 
user and their tasks in mind. 


Introduction 


Usability is a measure of how well a product meets the needs of its users. It is also about 
bridging the gap between people and machines. Websites need to have a quality that makes 
them easy to learn, easy to use, easy to remember, tolerant of errors and provides users with 
positive motivation. Competition is just a click away so it is imperative that you do not place 
any obstacles in your user’s way of getting the information or service that they want. 


Simplicity wins over complexity every time. Following some or all of these usability guidelines 
will be an improvement for your users and your company. Some of the benefits you will find 
from better usability will be: 


e Reduced Customer Support: A well designed and usable website that makes it 
easier for your users to order online, have their questions answered and their 
problems resolved will obviously reduce the amount of time that you as a company 
will spend reading their emails, taking their calls and handling their complaints. 


e More Customers: Visitors can become your customers if they find it easy and 
satisfying to use your website. There will also be recommendations. Designing for 
universal access is a good social and business practice. Your website needs to be 
accessible to all users. If users cannot find what they are looking for then they 
assume that it is not there. Customers need to be able to finish their task intuitively. 
How can customers do business with you if you don’t provide the facilities for them to 
do the task? 


e More Time to Spend Developing your Company: Lack of usability can cost time 
and effort and can determine the success or failure of a system. Usability applies to 
all websites. If your website is intuitive then your customers can complete their tasks 
quickly and painlessly, you can start to think about developing other aspects of your 
business. 


“Usability rules the Web. Simply stated, if the customer can’t find a product, then he or she 
will not buy it. The Web is the ultimate customer empowering environment. He or she who 
clicks the mouse gets to decide everything. It is so easy to go elsewhere; all the 
competitors in the world are but a mouseclick away.” 


Nielsen, J. 2000 Designing Web Usability: The Practice of Simplicity. 


We hope you find this document useful and informative. 
Please email any feedback to enquiry@foxfordservices.co.uk or give us a call. 


Thank you. 


© Foxford Services Ltd 2004, all rights reserved. Web Usabilityv.1.4 Page 1 Company No. 3709379 


TL WY WED USADINILY sigcccccccecccecececcteccemcntntecatec emittance ceateesiee, 4 


Art Versus Engineering ? <i: cccccsco:snscsacecectsscactecissnsecdaccnacredscecassssgnctacéasanaetestsesccdsidndecedensseeds 4 
Why websites are designed inCorrectly. ...........cceccsseeeeeeeeeeeneeeeeeeneeeeeeeneeseseeneeeeeseeeneesesenens 4 
Ze AOS TISSIQI a oat aoa ect ack Rate ahaa eS ret ee acl so Seale De ease Sa ee S) 
Screen Real Estate sco. iccssccctccccces cecsstte cute ctte cawen stun duts sete cven stay deca ctivecee star coenabedeneaantvewenatey ceegstt cl 5 
Cross-Platform DOSIQM «ciciecvc ccctcecesctececestetcaesseteeneneten ceeestten cuesecte enensten cunsetieeeesoencnennttyeweerntee 5 
Where are USErS COMING FFOM? .....cceeeeeneee eee ee ee eeeeeee en eeeeeeenseeeeeeeseeeeeeaseseeeeaseseeeeeeeeseeneneeeenes 5 
Resolution-Independent DeSigh ..........:ecccceseesseeeeeeseeeeeeneeeeeeneeeeseeneeseseseeesesesneeseeesseeuseneenenes 5 
When is it Safe. to Upgrade? ...:...0.-ccccccecesseeseteseceeecasceeeesseseeceetasneneecestaceeraseseeecasesneetarensetece 6 
Separating Meaning and Presentation..........ccccccceeseeceeeseeeeeeeeeeeeeeeseeeeeeeseeaeeeseseanseeesneeeenene 6 
RESPONSE TMCS wise scic eres ceecteeteecdi lees ac edo tect eee ced soda aet Saws nt vs svawested tudes es cee seal inoeedeusnensten Skdgeeas 6 
Predictable ReSponse Times .............:c:seecceceeeeeeeeeeeeeeeeeeeeeeseesseaeeeseeeseseesseaneeseeeseeseeseeaneesenees 6 
Fast Downloads and Fast Connections. ......ccccecsececeseeeeeeeseeeeeseeeeeeeesesneesesesneeseseeneneeseenenees 7 
Faster URLS ceiscedecccccchesstetd etesecad fue ssugcit sscus det ecue satcagus cvs ewutes Se wecte cet secug cxswectecevsnsua Svewecuteveceeees 7 
EIFSUS Cre OMe 32s eeceteeececcecd Seecectd duvenctechv esac Sete awe cat caged dvtwecugelt esac sie weces cetsngud dvs wesaus eects cecectea¥s 7 
PSDIAING sroseictectcc ced eetecdet Secs Sadiewsute cu tederde ideas da ttewgeet sage cutedeed reas eucactwiees survautualieceenseaedeuethverdobs 7 
Links DOS Cri ptionsysicccecoece fadise teed etce eit ensbeceued seeded cat enauc cutedeceva vend coaieenssveveucetoegecnseavantuccteaertys 7 
LIM tS ocho teed es acle deere cecag dateeececeten leds te tued cusses evseeuidchescncecetstuus cvewtusscavesaes dhavecievet ants: 7 
Guidelines for Link Titles ..........cccesseeceseseeeeeeeeneneeeeeeeeeeeeeeeeseseseenseeeseaeseseseaesesesaeseeeeseanseeenees 8 
Colour: OF LINKS ooveccciececssccvectecsca bevieehcecaveddeeeeblen sch cutcve cpvuces eccuve cuuwcevuscveneceechecesvechrceecsunecstecre 8 
EINK EXPeCtatiOns si c5ec cece sdive tice cect cesdveesntes Stevi ca tanets cuteceedcavennte Ceeheevdestanceuceeetheetasnceceeteereant 8 
OUTDOU NG NINKS oovcec coach ed cctdarce ratcicee cheek oe cans cece ecdent ce mac evecevsten cape tacetel ean cucnedeccnoeenct tercaccatenecete 8 
INCOMING LAM or vvccsecceces cee etecesctgeceesscteeeensteereenicigestenteeteetvcdsedes seaeteersstieteessecerenviiensiininneniierss 8 
Linking to Subscriptions and Registrations .........cccseeccseseeeeseeeeeeeeeeseeseseeeeeseeeseensnseeeenens 8 
AAVertiSing LINKS -ccic esc cce sees ctees ce ctteteectcte este cteeies etic rescecenesdeesteesectett eveeestersevestieeverntereersieess 8 
Style: SNCSS sess ccsececscceveetecteveeckecteccdesceecwevectevaeeatcenacvacterswadsters cwscchesestecees cd eaneveetbeccbitestnee dateeer 9 
Standardising Design Through Style Sheets ..........ccccsssececeseeneeeeseeeeeeeeeeeeeeesseeneeeeseeneeessees 9 
Ensuring Style Sheets Work ........:ccccccesseseceseeeseeeeeenseeeeeeeseseseeeseseseeeeseseeeeesesesneesesesneeseeesnenes 9 
FAMGS icssctecvecceccevesctaeteactecenese te evete che stee deg teveets neeviniereesneie retains ddenniintessiciernenigentieierenetens 9 
Is It Ever Acceptable to Use Frames? ...0........cceccesceenee cece eeeeeeeeeneeseeeeesensseaeeeseeeeeesenseeeneesenees 9 
Grecib lity. ic ciccecescecccsscons sctcanacs cantieecttetvssechsters cuattevedevects evectersts ceed stetestsdusctengsotdesuey cveieersteesseetes 9 
Printing siscieeiesstievivescteeees deteedenete teevscteeeesnitieestete tevneieieennteretennigdensitarieennaipinneigdeinectieieederss 9 
3: ‘Content: DESIGN wisxceneendee teed Renee ees 10 
Whriting:Tor the WeD cee sccccets ccc ccesheccedts cee cginencceseaocchcgsadencdissucetsvsienecgdsssucedssntbecdsestesieateeieect 10 
COpy ECituin cc ccicccgs ic ccncedscctencsties cucctccecsaitenesés scenes cuactccesyaiizeeeascttetieaaciieecuactocedsieceteceaassaaeaate 10 
SCAM ADIT cine cores ects acetal Sag sae tec sttdecesscce len epie Seeeented ie enacts leeentte SeessedeceeustteeSeeentteveests 10 
Plain: Lan Quage .iccccicc cesccecitesscteds costates casctececueces ed censpeds suvees es coneses ed sessbeds cuveetessuentedesheneterteunse 10 
Page: CHUMKIAG siecccie fee vcc ects teccee recesses cdausseeeestenesvecuhepersedastterechssesvscuhanesse esses ed sSuentevsshenetech vents 10 
Page Titles in the Browser Window .........ccsssscceeeeneeeeseeeeeeeeseeeseeeseenseeeseanseeeseanseeeesenseeenees 10 
Writing Headlines -...:..cc:cccieccccee ccc edessecceeesseceescasctegeceseeeescaaseuecseasnaeeesssuueescasusceevaseneetehdeente 11 
Lee IDA iY ooo ieee sok cctceccct ce tceeticwessteeseustites cgesteds cusses ed cutepedscuwseses casiueds Gobspeds cusses es sueseedesussdisveesedi 11 
Online DoCuUMeNntatlON: ..cicecccsccececcescctenesecteeteesceceenesedeeesesteneeesectectenesectceeesenenessetecneescctineest 11 
Multimedia. ois. cecccicct eotecececeatcdes casecedicuseeded ewuseeded casspedecueseges cussiederusnedsy Senses ded sussiedssusneteewesete 11 
RESPONSE Time iii scc ee stiee cca eadege ch la hao sate cece i ce et'cd cede uedy Gated ca acnsg cee dienet'vs deco dis cheanetesaeeccurtneees 11 
Images and Photograpns ic. c.n5c.ceseeede cases cncesseeteenseeecs ceusueeescusseetssusneeciceesnedtsusneeercusneedtethsee 11 
Image REGUCTON, once. ceccecdieececdes cabetedieesnesescussctees sasspeds cesses es cunseedesheneds Ceegedi eueeseteeuened ox ceseet 11 
PANNA AUION es siccie te tet cet ca dace vad aes Suche dstcceeceDeceeed ewceccsdvsueegecedecesedvectecd sunacers Syeveneserecterdsesceeas 12 
MIAO Ors cscs citedeats enecegch Dace sce deleatdvsucxt ec uscecse uscereshtacceddvsnducoc\suces cussuevscsscanes svsveues Sesduviseusoass 12 
PUI slo es iaccede eden dasa ceed Pav ences antees cs acaba tate Pas satacndvocecra et suweewes enced ev sueceuvesoceeseyesuceaveseeees 12 
Enabling Users with Disabilities to Use Multimedia Content ............::ccceeseeeeseseereeeeeees 12 
Three-Dimensional Graphics .........22::cccccceeeeeeeeeeeeceeeeeeeneeeaeeeceeeee sens eeaseeeeeseeeseseeesneeeeseeeeneees 12 
Whenito use: 3D sccccciessctectecsrdcegesbelcaddvtecaedidepacics vvtel cad stececees Seen cedtelectesteaecd vieedeiede pees 12 


© Foxford Services Ltd 2004, all rights reserved. Web Usabilityv.1.4 Page2 Company No. 3709379 


A Site DSSIGM xccewcearecerecaredevecavedetedavededavadatedatedatedatadats date de lata dce leaded atte. 13 


HOME: PaGe ors sseve ice caceceieescecdccacccedssstuedecduaetetessusciceduvsaccecdsceeaizsssaedsccucuecivesseadetéestedtesduacenisvenee 13 
How wide Should the page be?.......:ccssssccceeseeeeeeeeeeeeeeseeeseeesneeseeeseesesesaesesesseeeseseseanseeeseas 13 
SPlasSh. SCrEONS . ori ccsvsscececncdeccedeystececcdecececnaadeecucuees cenanadueccduceieectedinacuctaececteauseasuccedieedeateazencete 13 
The Home Page versus Interior Pages ........cscsccccsssseeeeeeeceeeeeeseeeeeeesseneeeeseeneeeeseseeeeeseenenen 13 
Dee pr Lining wise cceslacéccdescecdeccecteceneakacdeciacucteresuecdecdecnceinednctenc¥sshecdecdacieaivessaccctisauceieedbeadettnence 13 
Metaphor ooo. cicciccinscscuscerecceadscdanncecnecsedsesdnctceiaeietrezinsaccacseiatecesaascncdsciearseianssanccutecteadatdaccsaetenres 13 
NeaViGatl OM i. ice czccdcccacecdieescecectesssscdeccactececsscccdecdescedssasseetesinatinedscductens cu secedecsncucdivesbucdstdesaeeedaatne 13 
SIPS StU Clune aie cates ccccccesncceccisensecce es scdcedenustececsancecdsatcueeedancueneséanacctsascozaeesacesedessceeaecdenseeieates 13 
User Controls Navigation ..........cccsccccessseneseseeeeeesseenseeeseenseeeseaneeeseseaesesesaeseseseaeseseseeaeaeeenees 14 
SUD-SItCS ieee scvetec cteacd ae eatee ce ea steitcs ca scttet ev st cu ceceentutee Canttecsdantuncenastuetecdsduveddsstuelcacesetederdstuncevene 14 
SOANCI eetecsetice deste enedcededetce bec atcued dcducecestae teed haceace stucaneasbeusacsaccebeenscccaateastendacpectedecrecuteerace 14 
Page Descriptions and KeyWoldss ........:s:cccesseseseseereeeeeeenseeeseeneeseseanseeeeseaeseseseanseseseenseeenees 14 
URL D@SIQI rs siccvedsscecccetesutecdeniendte de sentvectesuces de scecvecesctececaaeceectadbeccesesistecdeasecrecrssceeedessuetecescete 14 
S. AMiPAMeL DESIGN escc gc ceses exe Feseeete ese ents weer ener thar eneresereaecedetenecosetenecenetne eure 14 
Differentiating Intranet Design from Internet DeSiQN .........::cccesseeceeeseeeeseseeeeeeeeneeeeeeeeees 14 
Extranet: DOSIGMIN i iecice cf eesecic es cctiek fenencctceetacedsveusced sntesues fureduiecerseacedeewausecersnstacuerscaceceewacveertensts 14 
Employee Productivity .........::ccccsssseseceseeneeeeseenseseseenseeeseeeseseseaeseeeeseaeseseseaeseseseaeseseseanseesenes 14 
Intranet: Portals eicsec. ces ciedeeetices Seenedeheccace Seeete2d cat cased dvbescudcatsncleceesacts dvewsuuecenscaceceeencvereeenses 15 
Directory, Search and NeWS...........::ccsceeeeeceeeeeeeeeeeeeeeeeeeeeesnneseaneeceeeeasensseaeeeeceseeeseneecaneeeesees 15 
Intranet Design Standards ..........ccccccceessneeeseeeeeeeeenenseeeseeeseeeseeeseeeseeseseneaeseseseeeseeeeneaneeeesees 15 
Guidelines for Standards. ........ccccccesseceeeeseneeeeeeeenseeeeeeneeeeeeeneeenseeneeeeseeneeeaseeneeeaseeeneeenseeneeenss 15 
Browser Defaults ssscccccessccccercscts evessteccvesesteereesteisrentiteervessstereeesiieretsnsinnededeeiareneniiersreesinrentioee 15 
Search Engine Defaults ...........ccccceesenceeeeeeneeeeeeeneeeeeeeeeeeeeseaeeeeeseeeeeeesecneeeaseeeeeeaseeneeensesenenenss 15 
Intranet: USGL TeSting viscccccescsctecectsciecsesscteresestedentsasteeteesteceeedestieentsesteceeestiereestedereresaeeteescies 15 
6. Accessibility for Users with Disabilities «2.00.0... eee eee eeeeeeeeeeeeeeeeereees 16 
Web Accessibility Initiative ............ccesseseeeeeeeseeeeeeeeeeeeseseeneeseseseeesesesneesesessneeseseenenseeesnaees 16 
Visual DiSabilithes: see. sccceiesctecesi cece cctevandceesiesei suds actvcdvesceicdisacteesvsdee cddsseceeshdusctetsveseecaessiaeas 16 
ATE AttribUte Soci. ccersec cece. ces cos ectecediecei cass scnecseseueacetssececdinscedcdegacuedéveectoecdviscticadsscuecsvssdeechstueiaas 16 
Auditory: Disabilities: .cccccccvsccscesssccecgtesacecatssctescaissececdinecedcdesactetsvssdee cd¥ssaceessbetueasverdeecatsnetecs 16 
Motor :Disabilithes sc. cccrs2icccecevcccdes ceteccecs cascceeeesescetscssuettncssaatis eveteversuscatsteasacdtscascterzessscetieveate 16 
f2 Serving a Global AUGIGNCE oii llc tele lala ules alc la lh aie lees 17 
Internalisation Versus LOCalISAtION. ...........:ccccceeeeeeeeeeeeeeeeeneeseeeeeeeseeeeseeseeeseaeseeesenseeseeaes 17 
Designing for InternationaliSation. .........cccceecccseeeneeeeeeeeeeeseeeeseeeseeeseessenseeeseaeseeeseennseeeenes 17 
International INSPECtiON, ciciiisce cede coc seivenseecie De ced dv deee aden Gite edeviese acted exeebieduecntec ince creedtuseteditee ss 17 
Translated and Multilingual Sites .............cccccssseeeeeseeeeeeeeseeeeeeeseeeeeenseeeeeeeeeseeeeeseseeeseneseeees 17 
Language: Choice aici. cisecieehs teste cticcesscecaeeiteteccasbecctedteesbetestbsiieest eecshegieesnecgutnetueginesbccesteeaee 17 
Multilin Glial SG@anrh é. 05 csc ceccscedete tbceraeeecteeecch cecteseeceecaesccdecuecuiuechessedeyerdsleeseesvedeseesesccerieesner 17 
Regional: Differences yi jiiiccieessccteicdchecct neck ceceeesetevecevhegeaetecdentesuieeyenseetesfeesedtestessieesnesscceyieesnee 17 
8. Recommended Reading ..............:s:::cccceeeeseeseeeeseeteeeeseeeeeeeseeseeseneeseenenenseeees 18 


© Foxford Services Ltd 2004, all rights reserved. Web Usability v.1.4 Page3 Company No. 3709379 


1. Why web usability 


If users cannot figure out how to use a site within a minute, they normally leave. Users now 
tend to experience the usability of a site before they have spent any money on potential 
purchases. With product and software design, customers pay first and experience usability 
later whereas on the Web, users experience usability first and pay later. 


L : 3) 
Consumer Online Spending at UK Sites 1997 - 2002 


which shows the dramatic increase in 
1000 Consumer Online spending since 1997. This 
should be a good enough reason to ensure 
that your website passes a usability test. 


a This is a graph from NUA Online Surveys, 


Art Versus Engineering? 
There are two basic approaches to design. 
1. Expressing yourself artistically 
2. Engineering ideal of solving a 
customer’s problem. 
We will concentrate more on the side of 
engineering, as the main goal of the Web is 
to make it easy for customers to perform 
their tasks. 


AMOUNT IN MILLIONS (US DOLLARSS) 


YEAR 197 1998 1999 Pi) 2001 2002 


Source: Datamonitor 


On the Web, competition is for the user’s time and attention and not just limited to other 
companies in your industry, so good service and usability is a must. If there is any doubt 
about whether to choose design A or design B, get your customers to provide you with the 
answer. 


Users should be watched to see what they like, what they find easy, and where they fall over. 
Web usability changes less rapidly than web technology, so the usability guidelines will be 
beneficial to all websites and users for many years. Provide the best environment so that 
customers can get to the product or service. 


Why websites are designed incorrectly. 
Fundamental errors are common on all levels of web design. 


e Business Model: The Web should be treated as a way we do business in the 
network economy and not as a ‘Marcoms’ brochure. 

e Project Management: Instead of treating the web project as if it were a traditional 
corporate project, it should be managed as a single customer-interface project. 

e Information Architecture: Structure the site to mirror the user’s tasks and their 
views of the information space rather than structuring it to mirror the way the 
company is structured. 

e Page Design: Design for an optimal user experience under realistic circumstances. 
Internal demos can be misleading and can forget the novice user. 

e Content Authoring: Content should be written in a style that is optimised for online 
readers where the norm is to scan text. Provide short pages with secondary 
information on supporting pages. 

e Linking Strategy: Hypertext is the foundation of the Web and no site is an island. It 
is more beneficial to your users and your company if your site provides everything 
your users require in one site, so provide links to good sites. 
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2. Page Design 


For usability, site design is often more important as the user will be unable to get to the 
correct pages if the site is not structured for user's needs. A navigation system should be 
provided to allow users to find what they want. 


Screen Real Estate 

Content of interest to the user should dominate web pages and not navigation facilities. White 
space should be used to separate content rather than heavy lines as it guides the eye, 
clarifies the grouping of information and also contributes to faster download times. 


Content should account for at least half of a page’s design and preferably closer to 
80%. Navigation facilities should be kept below 20% of the space. This will be higher for 
home pages. If advertising needs to be used it must be considered part of the overhead of the 
navigation facility. 


Simplicity always wins over complexity especially on the web where every 10 bytes saved is 2 
milliseconds less download time. To predict user’s monitor sizes is virtually impossible, so it is 
necessary to use a single page design to work with all the different display devices. 


Cross-Platform Design 

Web designers need to accommodate and support user-controlled navigation. Sites that force 
users through set paths or prevent them from linking to certain pages can feel strict and 
domineering. Design for freedom and movement. A logo linked to the home page on every 
page will help users who have gone straight to an internal page. 


Where are users coming from? 

Users access the web from many different devices. On the web a factor of 100 in screen area 
between hand-helds (PDAs) and workstations needs to be accommodated and a factor of 
1000 in bandwidth between modems and T3 connections. 


Because of the different size monitors, pages need to be designed to work on small screens. 
Any web design will look different on this variety of devices. Designers should specify pages 
in terms that enable browsers to optimise the display for each individual user’s circumstances. 
Style sheets would help. 


Resolution-Independent Design 

Design resolution-independent pages, which adapt to whatever size screen they are 
displayed on. Use percentage based layout instead of a fixed pixel-width for any design 
element. Icons should continue to work when they are displayed at 100dpi resolution or 
better. 


Try not to include any text in graphics. Resolution-independent pages will work well as 


printouts. Provide a separate printed version for any long documents even though users are 
known to print out pages directly from the browser. 
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When is it safe to upgrade? 

HTML 1.0 is the only format you can use with complete confidence. Don’t let any beta-phase 
web technology any where near your site. It is recommended to hold off from using any new 
web technology on your website until 1 or 2 years after it is officially launched in a non-beta 
version. 


In the first year, avoid new versions of HTML or other specs, any browser-specific features, 
plug-ins or other software components, or new data formats. 
Three reasons to be conservative in using new web technology in your site 
1. With an upgrade speed of approximately 1% per week, it will be two years before 
everybody has it. 
2. There will be bugs that need sorting out within the first two years. 
3. Trial and error is involved when determining the best way of using new technology, 
which can harm users rather than help them. Sit back and watch how it takes off. 


Provide content in an alternative format for those users who have not yet upgraded if you 
decide you cannot wait a year. 


Separating Meaning and Presentation. 

Originally web design was based on encoding the meaning of information and not its 
presentation. Web design is now reverting back to encoding the meaning of information due 
to the many different display devices. 


With the meaning of information being encoded, speech browsers can know how the 
information is structured and relay headlines etc to the user much easier. Information relating 
to the presentation of the information should be kept in a separate style sheet file that is 
linked to a content file that contains only semantic mark-up. Style sheets are a solution and in 
the future a page could be linked to 3 different style sheets. One for desktops, one for small 
screens and one for television screens. 


Response Times 
Robert B. Miller presented a classic paper on the topic at the Fall Joint Computer Conference 
in 1968: 

e One tenth of a second (0.1). This is the limit where the user feels the system is 
reacting instantaneously. No special feedback is required. This is also the response 
time limit for any applets that allow users to move, zoom, or manipulate screen 
elements in real time. 

e One second (1.0). The user will notice the delay but their flow of thought will remain 
uninterrupted. No special feedback is required. 

e Tenseconds (10.0). This is about the limit for keeping the user’s attention focused on 
the job at hand. After this, users start doing other tasks while waiting. 


Predictable Response Times 

Users come to expect certain actions to take a certain amount of time and their behaviour 
changes if this alters. They can be pleasantly surprised or feel that it has not been done 
correctly if the task finishes earlier than their expectation and get annoyed or abandon a site if 
a task takes longer than expected. Stabilising your response times will result in a usability 
improvement. 


Help users predict response times by giving some indication of what’s happening, the size of 
the download or how long more it will take if the response time will be more than 10 seconds. 


The response time from server to browser determines the user’s experienced response time. 

e The throughput of the server: Machines should be upgraded as traffic increases. 

e Server’s connection to the Internet: Upgrade your connection; don’t leave until current 
connection is saturated. 

e Internet: During peak hours and cross-continent connections the Internet still has 
bottlenecks. 

e User’s connection to the Internet: Connection speeds are extremely low for the 
majority of users. 

e The speed of the user’s computer and browser put together: Complex tables can take 
significant time to render on low-end machines. 
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Fast Downloads and Fast Connections 

The most popular sites are fast. Keep graphics to a minimum. Coloured table cells can work 
just as well. If it is necessary to use graphics, try using multiple occurrences of the same 
image, as they will render quickly as the image will be in the user’s cache. The following table 
shows the maximum allowable page size required to achieve desired response times for 
various connection speeds. Half a second in latency is assumed. 


1 Second Response Time 10 Seconds Response Time 
2 KB 34 KB 


8 KB 150 KB 
100 KB 2 MB 


The above table and figures were taken from Jakob Nielsen’s book “Designing Web Usability” 


The page size limits above may seem strict but the penalty sites pay is loss of users when 
they exceed these. 


Faster URLs 
Links to a directory should include the final slash (‘/’) in the URL when embedded in web 
pages. Leave the slash out when writing the URL for human consumption. 


First Screen 
Give users some information to act on while the rest of the page loads. Guidelines for fast 
initial loading include the following. 
e Top of the page should be meaningful: More text and fewer images. 
e Use ALT text attributes for images so users can understand what the image will be 
about. 
e For the browser to draw the top of the page quickly it requires layout information such 
as the WIDTH and HEIGHT attributes on all images and table columns. 
e Cut down on complexity of tables. Possibly split information into several tables. 


Linking 
There are three types of links: 
1. Structural navigation links: e.g. home page buttons and links to pages that are 
subordinate to the current page. 
2. Associative links within the content of the page: Underlined words or image maps and 
bring users to pages with more information. 
3. ‘See Also ...’ links: If current page is not the right one these links can help users to 
find what they want. 


Link Descriptions 

The words should not be more than two to four words long as users will not be able to pick up 
on its meaning by scanning. Avoid using “Click Here” as they are not information carrying 
words. It is also recommended to use additional verbiage to explain the link. 


Link Titles 

Internet Explorer 4.0 and newer browsers have the capability to pop up a short explanation of 
a link before user selects it. This provides a preview of where link goes to and improve their 
navigation. This explanation is called a link title. These do not affect users with older 
browsers. 


‘ ; www.useit.com shows a link title 
Full list of interviews when the user’s cursor moves over 


; ; the link. 
Archive of other news items 


Commentary and link spotlights that have appeared on this 
homepage in the past 
.. Framnant. ¢ Bad. WT 
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Guidelines for Link Titles 
Information to include in a link title can be: 
e Name of the site the link will lead to. 
e Name of the subsite the link will lead to. 
e More detail about the kind of information to be found on the destination page. 
e Warnings about possible problems at the other end of the link. E.g. registration 
required. 
Link titles should rarely exceed 60 and never 80 characters. If link is obvious then there is no 
need to use link titles. 


Colour of Links 
Links to pages not seen by the user are blue whereas link to pages visited by the user are 
displayed in purple or red. 


www.useit.com’s website show how the colours 
About This Site work for links. Blue for links that have not yet 
aa ; been visited. Purple and red for already visited. 
Why this site has almost no graphics The red coloured link is the last one visited. 
Portal traffic referral statistics 


Copyright and reprint rules 


Link Expectations 

Always use the same URL to refer to a given page. A hypertext link has a departure page and 
a destination page. There are two principles links should follow to increase their usability. For 
departure there is a need to explain to users why they should leave their current context and 
what they will get at the other end of the link and for arrival place the user in the new context, 
which is relative to where they came from. 


Outbound links 

You don’t own users so do not try to keep them within your site by not providing links to 
external sites. Select good external links as whatever value the user gets from the external 
site will partly rub off on your site because you led them there. 


Incoming Links 

Incoming links are valuable ways of generating traffic to your site so support these links as 
best you can. This can be done by having permanent URLs for each of the pages in your site. 
If a page has a temporary and a permanent URL both should be made available to incoming 
links. Also ensure the content of your site is so great that others will want to link to it. This can 
be helped by not having too many topics on each page. 


Linking to Subscriptions and Registrations 

If you require subscriptions or user registration you may as well kiss goodbye to new users 
coming from incoming links as authors will not link to you. An option would be to make certain 
pages at special URLs available for free linking so that users who arrive at those URLs are let 
in without seeing a login screen. 


Advertising Links 

Because you control the links yourself if you pay for the ad, it is a special case of incoming 
links. It is recommended that you link directly to payoff pages that follow up on the message 
in your ad instead of linking directly to your home page. Advertisement banners should be 
designed as a hypertext link. 
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Style Sheets 

As your content will be presented on a large variety of devices, pages should be designed to 
specify the meaning of the information. Rather than a single device requiring that you modify 
thousands of content pages, it would be better to create a single style sheet file. 


There are two ways of implementing style sheets: 
1. Embedded style sheet: This style sheet is included as part of the web page using 
extra lines of code 
2. Linked style sheet: This style sheet is kept in a separate file and each page that 
wants to use that style has a hypertext link in its header that points to the style sheet. 


Always use linked style sheets. A single style sheet for the entire site will mean that a single 
download will be required once and for all. A single change can update the look of the entire 
site. 


Standardising Design Through Style Sheets 

All style sheets should be designed by a single, central design group, this will help with 
consistency and ensure that good style sheets are written. Style sheets should come with a 
manual that explains the styles and when and how to use them. Provide plenty of examples. 
Screenshots should be made into clickable links, which will allow users get to the effect they 
want to achieve. 


Ensuring Style Sheets Work 
If the end user or browser disables styles sheets, pages must continue to work. This will also 
apply for users with older browsers. Disabling style sheets in the browser and reload the page 
can check the presentation of your page. Keep the next few guidelines in mind when working 
with style sheets. 
e Donot use more than two fonts. 
e Do not use absolute font sizes. 
e Do not use ‘important’ feature. This is where CSS allows style sheets to specify that 
certain settings should override those in other levels of the cascade. 
e Use the same ‘CLASS’ names for the same concept in all style sheets if you have 
multiple style sheets. 


Frames 
We have 3 words of advice here - just say no (!) 


Is It Ever Acceptable to Use Frames? 

To ensure URLs keep working when using frames, all hypertext links should have a 
TARGET="_top’” attribute in their anchor tag. This makes the browser clear out all the frames 
and replace the entire window with a new frameset. An exception would be where frames 
were used as a shortcut for scrolling within a single page. Frames are also useful for “meta- 
pages” that comment on other pages. Inline Frames which come with HTML version 4.0 nest 
as part of their host page and do not interfere with the user’s navigation. 


Credibility 

To establish your credibility as a professionally run operation is one of the main goals of good 
web design. Avoid heavy backgrounds and amateur junk. Good-looking visuals have a high 
impact on usability and an opportunity for establishing credibility. 


The future might see a credibility rating system for Internet services ... 


Printing 

Users need to print out information as they see it, as it may not be there when they return and 
it can be uncomfortable to read large amounts of text from computer screens. Try to provide 
two versions of all long web documents. One can be optimised for online viewing by using 
hypertext links and chunking and the other version should keep the entire document in one 
file with a layout that is optimised for printing. 


PostScript and PDF formats should be used for printable files. Supplement them with links to 
the same content in HTML for online viewing. Printable files must accommodate two page 
formats: A4 and 8.5 “x11”. Ensuring the width of the page fits on an A4 sheet and the height 
of the page must fit on an 8.5 “x11” sheet can do this. Leave a margin of at least half an inch 
for all four sides. 
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3. Content Design 


Users visit websites for their content. The design is there to allow people access to the 
content. Content is number one. When users visit a page they immediately scan through the 
content and it is only when they have finished with the content that they will scan the 
navigation area for ideas of where to go next. 


Writing for the Web 
Users look at the text and headlines first. Present the content in a manner that draws in 
readers. There are three main guidelines for writing for the Web. 
e Be succinct: Write only half of the text you would have done if you were doing a print 
publication. 
e Write for scan ability: Short paragraphs, subheadings and bulleted lists. 
e Hypertext should be used to break up long information into multiple pages. 


Copy Editing 

Put all web pages through the spell checker at a minimum. It is also recommended to 
proofread the pages and high-end web organisations should employ professional copy editors 
to go through the text. 


Scan Ability 

Users scan text and pick out keywords, sentences and paragraphs of interest and skip the 
less interesting sections. 

Articles should be structured with two or three levels of headlines. 

Headings should tell the user what the page or section is about. 

Use bulleted lists and similar design elements to break the flow of uniform text blocks. 
To make important words catch the user’s eye, use highlighting and emphasis. 
Highlighting and background colours must look different from link colours. 


Plain Language 
Start each page with the conclusion. 


Give the user the most important information first. One idea per paragraph is a good rule of 
thumb as users who scan often only read the first sentence of each paragraph. Limit the use 
of metaphors especially in headings. 


Page Chunking 

Split information into multiple nodes, connected by hypertext links. Text should be kept short 
without taking away from the depth of the content. The information should be split into 
coherent chunks that each focus on a certain topic. Limit the use of within-page links as users 
often expect to get taken to a different page and often hit the back button when they finish. 


Wednesday 6th November 2002 


Text only version www.bbc.co.uk’s website shows an article with links to 
: secondary pages. This gives a brief synopsis of the story 
Studying forfame and the secondary pages can give more information if 
With the end in sight and a massive required by the user. 
prize up for grabs, life is getting 
serious at Fame Academy. Vote to 
give a student a second chance, 


If you harbour ambitions of fame, 
One Music, So DJ and Blast could 
speed you on your way to glory, 


Page Titles in the Browser Window 

Often used as the main reference to pages. They are also used in navigations facilities such 
as bookmark lists and history lists. Page titles should only have between 2 and 6 words. 
Different titles should be used for different pages. For quick in HTML, every page has a title 
that is specified in the header section of the page. Page titles scanning it is best to optimise 
titles by using the information-carrying words at the front and not ‘A’, ‘An’ or ‘The’. 
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Writing Headlines 
The guidelines for writing headlines for the Web are: 
e The article should be clearly explained to the user in terms that they can relate to. 
e §=6Write in plain language 
e Avoid teasers that try to entice people to click to find out what the article is about. 
Users have been burned too often. 
e =Avoid ‘A’, ‘An’, ‘And’ or ‘The’ in email subjects and page titles. 
e The first word should be an important information-carrying one. E.g. start with the 
name of the company, person, or concept discussed in an article. 
e Do not start all page titles with the same word. 


Legibility 
e Between text and the background use colours with high contrast. Black text on a 
white background (positive text) or white text on a black background (negative text) 
for optimal legibility. 
e Use subtle backgrounds or plain colour backgrounds 
e Use fonts that are big enough for people to read. 
e Text should stand still and almost always be left justified. 


Online Documentation. 
Jakob Nielsen’s First Law of Computer Manuals states “People don’t read documentation 
voluntarily”. 
e Make the documentation pages searchable as users only turn to documentation when 
they have specific problems. 
e There should be an abundance of examples 
e Instructions should be task-orientated and show how to do things step-by-step. 
e Provide a short conceptual model of the system and include a diagram that explains 
how the different parts work together. 
e Use hypertext links to link any difficult concepts or system-oriented terms to a 


glossary 
e Be brief. 
Multimedia 


Constrain use of multimedia as it can result in confusing the users and make it more difficult 
for them to understand the information. 


Response Time 

File format and size must be indicated in parentheses after the link whenever a file is pointed 
to that will take more than10 seconds to download with the bandwidth available to most of 
your users. 56Kbps need a warning for files larger than 50 KB and for business users mark 
files larger than 200 KB. Provide previews of all multimedia objects on plain HTML pages. 


Images and Photographs 
Minimise graphics and text rendered as images. Instead take advantage of the hypertext 
features of the Web. Add more images as users follow links to more specific pages. 


Image Reduction. 

Use a combination of cropping and scaling. To get a thumbnail that is 10% of the original 
image. Crop the image to 32% of the original size and then scale the result to 32%. Final 
image will be 0.32 x 0.32 = 0.1 of the original. 
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Animation 
Animation is good for seven purposes: 

e Showing continuity in transitions: Changes between states will be much easier to 
understand if the transitions are animated instead of being instantaneous. 

e Indicating dimensionality in transitions: e.g. turning back to a previous page can 
be shown by the opposite animation (sweeping from left to the right). 

e = Illustrating Change over Time: e.g. deforestation of the rain forest can be illustrated 
by showing a map with an animation of the covered area changing over time. 

e Multiplexing the Display: e.g. client-side image map with explanations that pop up 
as the user moves the cursor over the various hypertext anchors. 

e Enriching Graphical Representations: Some types of information are easier to 
visualise with movement than with still pictures. E.g. in icon design. 

e Visualising Three-Dimensional Structures: Animation can be used to emphasise 
the three-dimensional nature of objects and make it easier for users to visualise their 
spatial structure. 

e §6Attracting Attention: Avoid continuous animation. 


Video 
Minimise on the Web due to bandwidth constraints. Currently video is good for: 
e Promoting television shows, films or other non-computer media. 
e Giving users an impression of a speaker’s personality 
e Showing things that move. 
Best to digitise a higher-quality version of the video and make it available for download than 
use streaming video. 


Audio 

Separate channel from that of display and can provide a sense of place or mode. Speech is 
also good for teaching people the pronunciation of words. Background sounds must remain 
quiet and non-intrusive and there always needs to be a user preference setting to turn them 
off. 


Enabling Users with Disabilities to Use Multimedia Content 

Captions on videos and transcripts of audio presentations can help the hearing impaired. For 
the visually impaired users the use of Descriptive Video Service with a separate audio 
narrative that runs between the pauses in the main audio track can help. 


Three-Dimensional Graphics 
Difficulties from using 3D on a computer are: 
e We don’t get true 3D, as the screen and mouse are both 2D devices. 
e Difficult to control 3D space with the interaction techniques available such as 
dragging and scrolling. 
e Users need to pay attention to the navigation of the 3D view as well as the navigation 
of the underlying model. 
e Poor screen resolution. Remote objects lose detail. 
e Software required for 3D is crash-prone, non-standard and extra download. 


When to use 3D 
Use of 3D is appropriate when you need to visualise physical objects that need to be 
understood in their solid form. E.g. trying to understand the shape of a molecule. 


Library of 3-D Molecular Structures 


www.nyu.edu’s website about 3D molecular 
structures 


if you are using Cosmo Player click on the above image of a water dimer 


[ About the Database ] 
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4.Site Design 
Site design should be aimed at simplicity above all else, as few distractions as possible. 


Home Page 

The home page should be designed differently than the other pages but share the same style. 
There should be no home link on the home page but should have a larger logo. The home 
page needs to answer the questions “Where am |?” and “What does this site do?” The 
answers should be obvious from the design. News or special features you want your users to 
be aware of should also have a place on the home page. 


Home pages need to offer 3 features: (1) navigation (2) summary of the most important news 
or promotions and (3) a search feature. For sites where search is a primary access 
mechanism, include search box at the top of the home page, otherwise a simple link to the 
search page. Navigation should be the number one priority for the home page. The search 
box if any should be in a prominent position in the top right hand corner. 


How wide should the page be? 
Do not design for any standard width but create a page layout that will work across a range of 
window sizes. 


Splash Screens 
Splash screens are annoying and the only appropriate use for them is to filter users and warn 
users about the content that will be found on the home page. 


i a bs J 
———d 
XXX-banners specializes in the production of adult site banners. 


The following sample material contains adult content , Ps 
If you are offended by nudity, are not of appropriate age to view adult www.xxx-banners.com’s website shows 


content or live in an area where such viewing is illegal please exit now. @ Warning splash screen 


If you are a surfer looking for a good sex site Click Here. 


The Home Page versus Interior Pages 
Interior pages need to focus on specific content and the home page needs to focus on 
providing a general welcome message or an overview of the site. 


Deep Linking 

Deep linking enables other sites to direct users to the exact spot on your site that is of interest 
to those users. Users should not be forced to enter your site through the home page and then 
have to learn your navigation system just to get to the content they want. 


Metaphor 

Users live in the real world and not the metaphor world. It is best to explain what each 
interface element is and what it does rather than trying to fit everything into a single metaphor. 
Metaphors are good for providing a unified framework for the design and can help learning by 
allowing users to draw upon the knowledge they already have. E.g. shopping cart icon. 


Navigation 
Navigational interfaces are required to help users answer the three fundamental questions of 
navigation 
1. Where am |? Relative to the Web as a whole and to the site’s structure. 
2. Where have | been? The Back button, history list and hypertext links in different 
colours. 
3. Where can | go? The visible navigation choices and links on the page answer this 
question. 


Site Structure 

It is extremely important to have a site structure and that it reflects the user’s view of the site 
and its information or services. The site structure should be determined by the tasks the users 
want to perform on your site. 
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User Controls Navigation 

Web designers need to accommodate and support user-controlled navigation. Users use the 
Web as a whole and not as a specific site. Nobody’s site is the centre of the user’s universe; 
sites need to be designed to make it as easy for the user as possible. 


Sub-sites 

Sub-sites are a collection of web pages within a larger site that have a common style and 
shared navigation system. There should be a separate home page for each sub-site with a 
link to the home page of the entire site. The sub-site should have a global navigation system 
in addition to its local navigation. 


Search 

Search should be made available from every page on the site. Try to avoid scoped searches, 
as users often don’t understand site structure. Advanced search should be on a separate 
page linked from the home page where there is a simple search. Search results page should 
display the best hits at the top without duplicating occurrences of the same page. Highlighting 
all occurrences of the user’s search terms should enhance search destination pages. 


Page Descriptions and Keywords 

The page abstract is contained in a META tag with the name “description” in the page header 
and should only be 150 to 200 characters long. Lists of keywords are also placed ina META 
tag in the page header and are only used to determine the relative ranking of the retrieved 
pages. The keywords must be focused and highly descriptive and should include simple e.g. 
bus and compound terms e.g. double-decker bus. Keywords should be added for all the main 
synonyms for your topic and add alternative keywords for any terms used by your 
competitors. 


URL Design 

“Company.com” and “www.company.com” should be used as aliased names for your web 
server. Links from other websites are the third-most common way people find sites, so your 
site must be built to make it easy to attract inbound links. Ensure all URLs live forever and 
continue to point to the relevant pages. Temporary URLs are used to store content that 
changes on a regular basis e.g. the news and should be archived under a permanent URL in 
addition to the temporary URL. Old URLs should be kept functional for at least 6 months and 
preferably 2 years. It can take search engines 6 months to update their databases and get rid 
of their old URLs. 


5. Intranet Design 


It is recommended that two different visual styles and two different sets of templates for the 
intranet and the external website but should comply with the company’s overall design 
language. 


Differentiating Intranet Design from Internet Design 

Intranet users are your employees and Internet users are your customers. Avoid internally 
focused designs for external websites. Provide links to explanations of any corporate 
language on the Intranet for any new employees. 


Extranet Design 
The extranet should emulate the style of the external website. Extranet users should be 
assured that their information is kept private and not exposed to the public. 


Employee Productivity 

Any improvement in usability for the intranet is a direct contribution to your company’s bottom 
line. Efficiency, memorability and error reduction are the most important usability attributes for 
intranet designs. 
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Intranet Portals 

The intranet should be seen as your company’s corporate information infrastructure, which 
supports many real job functions and aids communication between departments. Every 
employee should have a personal intranet homepage with links to their work department and 
links to project pages, which involved them. Every project should also have a home page with 
links to home pages of the people working on it. The project pages should also have links to 
any project plans and reports. 


Directory, Search and News 

Intranet portal home pages should have three components 
1. Adirectory hierarchy that structures all content on the intranet. 
2. Search field connecting to a search engine that indexes all pages on the intranet. 
3. Current news about the company and employee interests. 


Intranet Design Standards 

Consistency is essential for intranet usability. The structure and presentation of the 
navigational system is also important. Every page should have an intranet logo, which is a link 
to the main intranet home page and a search button. 


Guidelines for Standards 
An interface design standard must 
e Provide lots of examples as designers follow the examples more than the body text. 
Ensure that all examples comply with the standards in every way. 
Provide checklists 
Have a standards expert 
Be supported by an active evangelism program. Look for any new projects and inform 
them of the standards 
e Be alive document, which is regularly updated. 
e Be supported by templates and development tools. 
e Have a good index and search facility. 


Browser Defaults 
Allow users to change the preference settings from the ones you provide to meet their 
individual needs but do provide a good set of default settings. The following default settings 
should be set: 

e Default home page should be your intranet home page. 

e Remove all links, bookmarks, buttons etc provided by the browser vendor. 

e The browser’s email preference should be set up to use the email program supported 

by your own IT department. 
e The default search button should be set to a single search service. 


Search Engine Defaults 

To select a good search engine, select 5 or so problems that are typical for people in your 
industry and phrase short queries for each problem. Enter these into the leading search 
engines and inspect the top 10 retrieved links. Give a rating for each of these links and the 
sum of these 10 ratings for the 5 problems will lead you to select a good search engine. 
Four other attributes also need to be accessed: 


1. How many seconds it takes from typing in the search engine URL until the first page 
has finished downloading 

2. Prominence of the search type-in field on the search page. 

3. How many seconds it takes from clicking the search button until the search result 
page has finished loading. 

4. Predictive value of the search results listing. 


Give 50% weight to search quality, 10% weights each to download time, search response 
time and search field prominence and 20% weight for the predictive value of the search 
results listing. 


Intranet User Testing 


Test users will be your employees and not your customers. Include new employees to assist 
with navigation and home page design. Usability can be tested in the lab or in the field. 
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6. Accessibility for Users with Disabilities 


With regards to the Web, a disability is where the user has some condition that makes it 
difficult to use traditional computer input and output devices in the way they were intended. 
Pages should be coded for meaning rather than appearance. 


Web Access Symbol 


A globe, marked with a grid, tilts at an angle. A 
keyhole is cut into its surface. The symbol should 
always be used with the following alt-text tag: 
Web Access Symbol (for people with disabilities) 


Web Access Symbol (for people with disabilities) 2,0 inches 


Web Accessibility Initiative 
See http://www.w3.org/WAI for guidelines about web accessibility and then plan a staged 
rollout of accessibility: 
1. Home pages and high-traffic pages redesigned to follow the important accessibility 
rules immediately 
2. New pages should follow high and low-priority guidelines. 
3. Medium Traffic pages should be gradually redesigned to follow the high-priority 
accessibility rules. 
4. The longer-term goal would be that all high-traffic pages and new pages be 
redesigned to follow all the accessibility guidelines. 


Visual Disabilities 

Always ensure high contrast between foreground and background colours and avoid busy 
background patterns. Emphasise the structure of the page by proper HTML markup. Always 
encode information with relative font sizes e.g. set the font size attribute to a percentage of 
the default font size. Test pages with default font set to 10,12,14,18 and 24 points. 


Alt Attributes 

Use ALT attributes as an alternative way of displaying your images to users who are unable 
to see them. This will allow the user to hear or see the alternative text if the image is not 
displayed. 


All image maps should be client-side and use ALT and/or TITLE tags for the link options. 


Decorative images which have no meaning should use ALT= “”. 


How much time do 
you have? 


Afew more seconds have gone by since you 


www.foxfordservices.com provide ALT and 
TITLE attributes with their images as shown here. 


How much time have you got? If you only have a few more 
seconds to spare, just click here... 


Auditory Disabilities 
Transcripts should be available of oral audio clips, and videos should be available in versions 
with subtitles. 


Motor Disabilities 

Some users have difficulty with detailed mouse movements and holding down multiple 
keyboard keys simultaneously. Improved browser design should be able to take care of most 
of these issues. 
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7. Serving a Global Audience 


Internalisation Versus Localisation 

Internationalisation means having a single design that can be used worldwide and localisation 
means making an adapted version of that design for a specific locale. Localisation often 
involves translation whereas Internalisation involves the use of simpler language that non- 
native speakers can understand. 


Designing for Internationalisation 

Avoid icons that can be offensive in other cultures. Be aware of displaying time for real-time 
events. It should always be made clear if the times are AM/PM or the 24-hour system and 
which time zone they refer to. Spell out the name of the month in any dates. Other differences 
to watch out for include punctuation, ($1,000 and €1.000), the currency symbol and units of 
measurement e.g. yards and metres. 


Companies & Participating Departments Www.tsanet.org shows 


ae Saas the local time in the 
eae, Waeuyrten,( ) context of the locations 
® Worldwide Customer Support (United Kingdom) (T) of department offices, 
0324 allowing the user to 
easily know what time 
it is in the department 


© UK & Ireland Support (United Kingdom) ‘ ; they wish _ to call. 


Microsoft (EMEA) 


© Primary Site (WA) (Washington) 


0208 


International Inspection. 
This involves having people from multiple countries looking at your design to see if it would 
cause any problems in their country. These people should preferably be usability specialists. 


Translated and Multilingual Sites 
Translate websites into the most commonly used languages. Your server log could help 
determine which countries have a substantial amount of users. 


Language Choice 

There are 3 common ways of implementing language choices. These are (1) use a staging 
page (2) have a language menu on the home page or (3) have a language menu on all 
subsequent pages. Only use a staging page if there is no default language for the home 
page. List the name of language in each country’s own language. 


Ryanair’s Home page 

provides language choices 
in each country’s own 
language as shown above. 


RYANAIR.com 


Multilingual Search 


Currently multilingual search requires the user to enter synonyms of the desired search terms 
in all the requested languages. It would be better to have the computer automatically perform 
multilingual searches by understanding the meaning of the search terms in several 
languages. 


Regional Differences 

Users should be made aware if you only are interested in serving a local market. Different 
models, prices or procedures for different countries should be made clear to the users. Deal 
with regional differences in the same way as language differences and have a list of 
additional countries on the home page, which the user can choose from. 
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8. Recommended Reading 


Bias, R & Mayhew, D Cost-Justifying Usability 

The most frequently asked question in the user interface field is how one justifies the cost of 
the additional project activities needed to do systematic usability engineering. 

This book has the answers in the form of worked-through examples and formulas for cost- 
benefit analyses as well as several case studies from multiple companies. 


Mullet, K. and Sano, D. Designing Visual Interfaces: Communication Oriented Techniques 
This is the number one book about visual design: it is recommended whether you are a visual 


artist or not. 


Nielsen, J. 1993 Usability Engineering. Boston: Academic Press 
Described as the ‘usability bible’, Nielsen provides a number of methods to evaluate a 
website’s usability 


Nielsen, J. 2000 Designing Web Usability: The Practice of Simplicity. Indianapolis: New 
Riders Publishing 


This book is an excellent source for designing a user friendly website, it has sold more than a 
quarter of a million copies in 21 languages. 
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